Posts Tagged ‘jQuery’
An easy to use jQuery slideshow WordPress plugin that helps you create an instant image gallery for your WordPress. With this plugin you don’t have to code anything: just write your post with the usual wysiwyg editor in WordPress and activate the slideshow, you are done.
YoxView is a free Lightbox-type media and image viewer jQuery plugin. It’s easy to use and feature-rich.
# FREE to use under the MIT license and open-sourced.
# Extremely easy to integrate. See how
# Supported content: images, video, inline content, iframes, Flash and more. Learn more
# On-line Video support – play YouTube/Vimeo/Hulu/etc.
# Content is resized to fit inside the browser’s window.
# Plugins to display images from Flickr/Picasa and video galleries from YouTube.
# Skins available to customize the viewer’s look and feel.
# Content is (optionally) pre-cached.
# Open the viewer from text links as well as image links.
# Multiple instances in the same page may be used.
# Multilingual and bidirectional – tooltips and button names may be in any language (language packs available!)
# Slideshow-enabled – play content automatically.
# Keyboard access – navigate content using the keyboard.
# Search engine friendly – large images are indexed.
# Cross-browser – compatible with all major browsers.
# Custom buttons – add custom links to the viewer.
# Developer’s API – call using simple Javascript.
# Integration: YoxView module for Drupal & WordPress plugin.
Orbit is a lightweight (2.8kb compressed) jQuery plugin for displaying multiple images in a limited space.
The HTML markup is pretty clean, just an element that wraps multiple images where the captions are generated from the title tags of these images.
jQuery Image Slider – Orbit
Images can be browsed using the prev-next buttons which appear on hover and there is an optional timer letting the user know when the next image will be displayed.
This easy-to-use plugin has several options like the animation type, animation speed, enable/disable previous-next buttons, captions, timer and more.
carouFredSel is a jQuery plugin that converts any kind of HTML element into an infinite and circular carousel.
It can scroll one or more items at the same time both horizontally or vertically.
Every item can be displayed automatically and/or by user interaction (pressing buttons or keys on the keyboard).
jQuery carouFredSel
The plugin works with items in different width-heights and it is compatible with most of the jQuery lightbox plugins.
It is possible to add/remove items from the carousel dynamically, play, pause or control the prev-next items using custom events and manage it at every level with the callbacks provided.
jQuery Ajaxy is a plugin which enables us to convert a standard website into an Ajaxed one with no hassles.
It has built-in support for URL hash changes, AJAX form submits or AJAX links.
jQuery Ajaxy
The usage of the plugin is so easy: the ordinary links and forms are upgraded into Ajax requests by just adding a CSS classname.
As the URL addresses change on every request, users can browse with browser back-forward buttons and URLs will stay SEO-friendly.
The plugin also gives the ability to control your web applications state manually through your code for advanced circumstances.
jQuery Bubble Popup is a plugin for the popular JS framework that helps creating chic tooltips which can be controlled easily.
The tooltips are shown/hidden with fading animations and any HTML content can be displayed inside them.
Slides is a clean, simple yet stylish slideshow plugin for jQuery. It’s easy to implement, customize and style.
It comes with many useful features including looping, auto play, fade or slide transition effects, crossfading, image pre-loading and auto generated pagination.
Add Drag and Slide With Dragdealer
Posted on: June 30, 2010
Dragdealer JS is a useful JavaScript based component that enables you to create custom dragable sliding UI controls in your web page. It is written in pure JavaScript, therefore doesn’t require any JavaScript library. It is also cross browsers and works in all major web browsers in including IE6.
Neon Text Effect With jQuery & CSS
Posted on: June 30, 2010
Neon Text Effect With jQuery & CSS
nice to keep this tutorial here, when we need to do effect for jQuery & CSS.
I wish U can look it up here! 🙂
After see the new iphone4 in apple website, the Retina Effect on display seem very cool effect for use.
Those are very new nice Image Content Sliders!!
Image and content sliders are everywhere, they are a trend that sprung to life last year with a bang and has escalated to point were seemingly every other new web design project has one. As a result of this popularity there are literally hundreds of jQuery slider plugins and scripts freely available, all will offer slightly different functionality, making it very hard to choose which one best suits you.
In this news round-up we take a closer look at the best of the freshest jQuery slider plugins.
Recreating the MLB.com Content Switcher with jQuery and CSS3
40 useful but obscure jQuery plug-ins that will hopefully help you improve the user experience on your websites.
Nice tutorial form create scrollable website with demo!
if you got time, must check it out!
Link
mb.containerPlus draggable
Posted on: May 29, 2010
This is a useful plug in to build full featured and fully skinnable containers. The container can be set to draggable, resizable, collapsable and minimizable.
When you are building an e-commerce website, especially a showcase, a website gallery, a template selling website…, you always need many good images for using and give your visitors/customers the detailed view of your images (or your product). These are my top 10 javascript image scripts you need to consider.
1. JQZoom
2. Nivozoom
3. Cloud Zoom
4. Image Power Zoomer
5. AnythingZoomer jQuery Plugin
6. MojoZoom
7. Tjpzoom
8. Magic Zoom
Tiny Carouse jQuery
Posted on: May 21, 2010
Tiny Carousel is a lightweight jQuery based carousel for sliding html based content.
* Can slide vertical or horizontal
* Supports navigation by button or paging
* The point where the carousel starts can be set
* Animation time can be set in milliseconds or to ‘instant’
* Number of block to move at a time can be set
* A interval can be set to slide automaticaly every given milliseconds
* Easy customizable
* Lightweight its only 100 lines of code. mimified the size is 2,33 kb
bMap jQuery plugin is an easy to to use Google maps plugin that can be used to add markers, layers, and custom marker icons. It allows you to add a sidebars containing list of markers and layers, so that users can easily enable or disable markers and layers from the map.
bMap exposes internal Google object, providing you full access to Google Maps API. In addition to jQuery library, Google API Key is required to use bMaps. It offers several configuration options for easy customization, and you can easily customize look and feel of the sidebar using CSS.
Features
Specify Zoom level
Specify Center position (Using longitude and latitude)
Specify Map Types (Normal, Satellite or Hybrid)
Easily add markers in the constructor
Easily Markers, Lines and Polygons to the map
Fully customizable sidebar
Can add Markers from an AJAX source
Advanced AJAX functions
Supports Google API functions
Check out these 30 awesome examples, including content sliders, image galleries, tooltips, accordions, lightboxes and modal windows. Download the pre-built scripts and add the code along with the jQuery framework to quickly and easily enhance your web designs.
jQuery plugins for images
Posted on: May 16, 2010
SimpleSlide is a lightweight jQuery plugin for creating slideshows. Some of its features include: ability to add any type of content in the slide window, provides status display that configures itself, supports full screen display and swipe functionality.
SimpleSlide is easy to setup and only requires you to used nested “divs” with specific class names and “rel” values to group various slides together. It also provides few configuration options to customize the animation speed, size of the status element, and status bar colors.
Features
Lightweight: 15KB normal, and 6KB compressed
Can display in full browser window
Supports multiple slideshows
Customize the animation speed, size of the status element, and status bar colors
Supports callback function
AJAX page loading
Cross browsers: tested in all modern web browsers
jQuery Slideshow Plugin
—————————————————————————-
jCoverfilp is a jQuery plugin that allows you to create highly customizable featured content sliders. It provides you with extra control over your slider component with functions to customize the styling and animation for items to the left and right of the current item. jCoverfilp is cross browser plugin that works in all modern web browsers.
jCoverfilp requires both jQuery and jQuery UI library to work, and is easy themeable. The default installation uses a clean style that can be updated with ease. All aspects of jCoverflip are customizable through the API, including: colors, fonts and styles, animation speed and number of items.
Features
Drag or click functionality to showcase featured content items on demand by the user
All aspects of jCoverflip are customizable through the API
Ability to showcase both images and content associated with an item.
Module integration with Drupal or Standalone version
Developed by New Signature; jCoverfilp is available for download under GNU General Public License. You can find further information, demo & download on jCoverfilp Website.
jCoverflip: Highly Customizable Content Slider
—————————————————————————-
Waterwheel Carousel is a jQuery plugin that you can use to display images with a cascading waterfall effect. It can be positioned either horizontally or vertically, and custom events can fired when an image moves into the center or clicked. It is a cross browser plugin that works in all major web browsers including IE6.
Waterwheel Carousel is highly customizable plugin, providing several configuration options to control its behavior. Implementation is also really easy and it require very simple markup to add it to your page. No CSS is really required on your part, since it only need minimum CSS to structure width, height, and hide the images while they are being preloaded.
Developed by Brian Osborne; Feature Carousel is available for download under GPL License. You can find further information, demo & download on Waterwheel Carousel Website.
jQuery Waterwheel Carousel Plugin
—————————————————————————-
Feature Carousel is jQuery Plugin that is primarily meant to display featured stories with carousel effect on your home page. It provides a unique alternative to commonly used content sliders; displaying three images at a time, with remaining images hidden behind the selected item.
Feature Carousel is highly customizable plugin, providing several configuration options to control its behavior. You can also customize its appearance by editing the CSS. Implementing Featured Carousal is really easy and it require very simple markup to add it to your page.
Features
Specify height, width, padding using configuration options
Specify default featured item
Captions for each featured item
Enable / Disable autoplay
Enable / Disable image preloading
Specify Carousal speed and animation easing effect
Jquery super useful scripts!
Posted on: May 15, 2010
Sliding Panel Photo Wall Gallery with jQuery
Scrollable Thumbs Menu with jQuery
Beautiful Background Image Navigation with jQuery
Rocking and Rolling Rounded Menu with jQuery
Awesome Bubble Navigation with jQuery
CSS and jQuery Tutorial: Fancy Apple-Style Icon Slide Out Navigation
Fixed Fade Out Menu: A CSS and jQuery Tutorial
SUPER JQUERY FOR DESIGNER!
Posted on: May 11, 2010
Slide out and drawer effect
Slider Gallery
Image Fade Revisited
Using Ajax to Validate Forms
Ajax Spy
Simple jQuery Spy Effect
SlideDown Animation Jump Revisited
Image Cross Fade Transition
Coda Popup Bubbles
BBC Radio 1 Zoom Tabs
Coda Slider Effect
Fixed Floating Elements
Automatic Infinite Carousel
jQuery look: Tim Van Damme
Animation Jump – quick tip
It’s all about CSS
10 Best jQuery Sliders
Posted on: May 10, 2010
Lazy loader is a jQuery plugin written in JavaScript. It delays loading of images in (long) web pages. Images outside of viewport (visible part of web page) wont be loaded before user scrolls to them. This is opposite of image preloading.
Lazyload
ShadedBorders removes most of these limitations and comes with the following features:
* JavaScript-only Photoshop(tm)-like rendering without external images
* Round corners
* Drop shadows
* Glow effects
* Gradient backgrounds
* Graceful degradation – will look ok if JavaScript is turned off
* Borders with different widths and semi-transparency
* Full support for liquid designs
* Anti-Aliasing
* On-hover support
* Disable some of the corners, e.g. bottom-left
* Change borders on-the-fly
* Real transparency – looks perfect on any background
* Cross-Browser: Firefox, Internet Explorer (>=6.0), Safari, Opera (>=9.0)
* Non-obstrusive
* Leight-weight (8.8KB uncompressed)
* Fast (0.5s for the example on a 2.2GHz machine)
* No JavaScript library dependencies
Some of the tutorial, I may have posted before, but I hope I have added more to skill up!
Creating a “Filterable” Portfolio with jQuery
How to Create a Simple News Ticker
10 Smart Javascript Techniques to Improve Your UI
Use the jQuery UI to Control the Size of Your Text
How To Create An Amazing jQuery Style Switcher
Create A Tabbed Interface Using jQuery
How To Create A Keypress Navigation Using jQuery
How to Load In and Animate Content with jQuery
How To Create A ‘Mootools Homepage’ Inspired Navigation Effect Using jQuery
Exactly How to Create a Custom jQuery Accordion
The Definitive Guide to Creating a Practical jQuery Plugin
How to Mimic the iGoogle Interface
20 Excellent AJAX Effects You Should Know
Build an Auto-Scrolling Slideshow That Works With and Without JavaScript
Design Define's Blog 